<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>内置指令</title>
        <style>
            .wrapper {
                border: 1px solid blue ;
            }
        </style>
    </head>
    <div>

        <!--在 #first 元素内部书写根组件的模板(template)-->
        <div id="first" v-cloak>
            <div class="wrapper">
                <div class="row">
                    <span>姓名</span>
                    <input type="text" v-model="name">
                </div>
                <div class="row">
                    <span>性别</span>
                    <input type="radio" v-model="gender" value="female"> 靓妹
                    <input type="radio" v-model="gender" value="male"> 靓仔
                </div>
                <div class="row">
                    <span>爱好</span>
                    <input type="checkbox" v-model="hobby" value="eat"> 吃
                    <input type="checkbox" v-model="hobby" value="eat-ji"> 吃鸡
                    <input type="checkbox" v-model="hobby" value="sleep"> 睡
                </div>
                <div class="row">
                    <span>省份</span>
                    <select v-model="province">
                        <optgroup label="省">
                            <option value="gansu">甘肃省</option>
                            <option value="sichuan">四川省</option>
                            <option value="shaanxi">陕西省</option>
                            <option value="shanxi">山西省</option>
                            <option value="henan">河南省</option>
                            <option value="hubei">湖北省</option>
                        </optgroup>
                        <optgroup label="直辖市">
                            <option value="chongqing">重庆市</option>
                        </optgroup>
                        <optgroup label="自治区">
                            <option value="ningxia">宁夏回族自治区</option>
                            <option value="neimenggu">内蒙古自治区</option>
                        </optgroup>
                    </select>
                </div>
                <div class="row">
                    <span>真情告白</span>
                    <textarea v-model="confession"></textarea>
                </div>
                <hr>
                <p>name: {{name}}</p>
                <p>gender: {{gender}}</p>
                <p>hobby: {{hobby}}</p>
                <p>province: {{province}}</p>
                <p>confession: {{confession}}</p>
                <hr>
                <button @click="change">更改省份</button>
            </div>
        </div>

        <a href="https://cn.vuejs.org/api/built-in-directives.html#v-once">vue.js API: 内置指令(v-once)</a>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>
            const options = {
                data() {
                    return {
                        name: '王某然',
                        gender: 'male',
                        hobby: [ 'eat', 'sleep' ],
                        province: 'gansu',
                        confession: '我交代...'
                    }
                },
                methods: {
                    change() {
                        this.province = 'ningxia';
                    }
                }
            }

            Vue.createApp(options).mount( '#first' );
        </script>
    </div>
</html>